<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>拖拽定义表单-示例</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<style type="text/css">
		.plugin-input{margin: 10px;width: 90px;}
		.dp{
			opacity:0.5;
			filter:alpha(opacity=50);
		}
		.pinput{margin-top:5px;margin-left:10px;float:left;padding:5px;cursor: pointer;height: 30px;}
		.pinput label,input,span{cursor: pointer;}
		.pinput-selected{
			background:#FBEC88;
		}
	</style>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'表单设计器-控制台',split:false" style="height:100px;"></div>   
    <div data-options="region:'south',title:'控件列表',split:false" style="height:250px;">
    	<table id="dg" class="easyui-datagrid" style="width:100%;height:250px"   
		        data-options="fitColumns:true,singleSelect:true,fit:true,idField:'plugId' ">
		    <thead>   
		        <tr>   
		            <th data-options="field:'name',width:100">控件名称</th>   
		            <th data-options="field:'label',width:100">标签名称</th>   
		            <th data-options="field:'width',width:100,align:'right'">标签宽度</th>   
		            <th data-options="field:'labelWidth',width:100,align:'right'">输入宽度</th>   
		            <th data-options="field:'plugId',width:100,align:'right'">控件标记</th>   
		            <th data-options="field:'type',width:100,align:'right'">控件类型</th>   
		            <th data-options="field:'min',width:100,align:'right'">最小值</th>   
		            <th data-options="field:'precision',width:100,align:'right'">精度</th>   
		        </tr>   
		    </thead>   
		</table>  
 
    </div>   
    <div data-options="region:'east',iconCls:'icon-config',title:'设置',split:false" style="width:250px;">
    	<form id="configForm">
	    	<div style="margin:5px;margin-left:10px;float:left;">
			  	<input class="easyui-textbox" name="name"   style="width:190px;" data-options="label:'控件名称:',required:false,labelWidth:80" />
			</div>
			
	    	<div style="margin:5px;margin-left:10px;float:left;">
			  	<input class="easyui-textbox" name="label"  style="width:190px;" data-options="label:'标签名称:',required:false,labelWidth:80" />
			</div>
			
			<div style="margin:5px;margin-left:10px;float:left;">
			  	<input class="easyui-textbox" name="labelWidth"  style="width:190px;" data-options="label:'标签宽度:',required:false,labelWidth:80" />
			</div>
			
			<div style="margin:5px;margin-left:10px;float:left;">
			  	<input class="easyui-textbox" name="width"  style="width:190px;" data-options="label:'输入宽度:',required:false,labelWidth:80" />
			</div>
			
			<div style="margin:5px;margin-left:10px;float:left;">
			  	<input class="easyui-textbox" name="type"  editable="false" style="width:190px;" data-options="label:'控件类型:',required:false,labelWidth:80" />
			</div>
			
			<div style="margin:5px;margin-left:10px;float:left;">
			  	<input class="easyui-textbox" name="plugId" editable="false" value="" style="width:190px;" data-options="label:'唯一标记:',required:false,labelWidth:80" />
			</div>
			
			<div style="margin:5px;clear: both;">
			  	<a id="btn_del" href="#" class="easyui-linkbutton plugin-input" data-options="iconCls:'icon-cut',disabled:true">删除</a>
			  	<a id="btn_up" href="#" class="easyui-linkbutton plugin-input" data-options="iconCls:'icon-arrow-up',disabled:true">前移</a>
			</div>
    	</form>
    </div>   
    <div data-options="region:'west',title:'控件栏',split:false" style="width:450px;">
    	<a id="textbox" href="#" class="easyui-linkbutton plugin-input" data-options="iconCls:'icon-add',plain:false">单行输入框</a>
    	<a id="mtextbox" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">多行输入框</a>
    	<a id="numberbox" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">数字输入框</a>
    	<a id="btn_4" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">单选框</a>
    	<a id="btn_5" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">多选框</a>
    	<a id="btn_6" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">日期框</a>
    	<a id="btn_7" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">日期区间</a>
    	<a id="btn_8" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">图片</a>
    	<a id="btn_9" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">明细</a>
    	<a id="btn_10" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">说明文字</a>
    	<a id="btn_11" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">金额</a>
    	<a id="btn_12" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">附件</a>
    	<a id="btn_13" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">外部联系人</a>
    	<a id="btn_14" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">联系人</a>
    	<a id="btn_15" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">部门</a>
    	<a id="btn_16" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">地点</a>
    	<a id="btn_17" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">计算公式</a>
    	<a id="btn_18" href="#" class="easyui-linkbutton plugin-input " data-options="iconCls:'icon-add',plain:false">关联表单</a>
    </div>   
    <div data-options="region:'center',title:'表单设计中心'" style="padding:5px;">
    	<div id="target" style="height: 100%;">
    	</div>
    </div>   
</body>  
<script type="text/javascript">
$(function(){
	var count = 1 ;
	var json = {};
	$('#configForm').form({
		onChange: function(target){
			var plugId = $('body').data("plugId");
				len = $("#"+plugId).length;
			if(len==0){
				return;
			}
			var $target = $(target);
			var name = $target.attr("textboxname");
			var val = $target.textbox("getValue");
			var data = {};
			if(name=='width' || name=='labelWidth'){
				val = parseInt(val, 10);
			}
			data[name]= val;
			
			$.extend(json[plugId], data);
			
			var type = json[plugId].type ;
			if(type==='textbox'){
				$("#"+plugId).textbox(data);
			}
			if(type==='numberbox'){
				$("#"+plugId).numberbox(data);
			}
			/*获取行记录索引并更新记录*/
			var rIndex = $('#dg').datagrid("getRowIndex",plugId);
			$('#dg').datagrid('deleteRow',rIndex);
			
			$('#dg').datagrid('appendRow',json[plugId]);
			
			$('#dg').datagrid("selectRecord",plugId);
		}
	});    
	
	$('.plugin-input').draggable({
		proxy:function(source){
			var n = $('<div class="proxy"></div>');
			n.html($(source).html()).appendTo('body');
			return n;
		},
		revert:true,
		cursor:'auto',
		onStartDrag:function(){
			//$(this).draggable('options').cursor='not-allowed';
			//$(this).draggable('proxy').addClass('dp');
		},
		onStopDrag:function(){
			//$(this).draggable('options').cursor='auto';
		}
	});
	$('#target').droppable({
		accept:'.plugin-input',
		onDragEnter:function(e,source){
			//$(source).draggable('options').cursor='auto';
			//$(source).draggable('proxy').css('border','1px solid red');
			//$(this).addClass('over');
			//console.log(source);
		},
		onDragLeave:function(e,source){
			//$(source).draggable('options').cursor='not-allowed';
			//$(source).draggable('proxy').css('border','1px solid #ccc');
			//$(this).removeClass('over');
		},
		onDrop:function(e,source){
			var plugId = new Date().getTime()+""; //时间戳
			var pplugId = plugId + '_p';
			var input = null;
			var btnId = $(source).attr("id");
			switch (btnId) {
			case 'textbox':
				input = '<div class="pinput" id="'+ pplugId +'" ><input class="easyui-textbox" id="'+ plugId +'" name="'+ btnId +'" style="width:200px;" data-options="label:\'单行输入框\',required:false,editable:false,labelWidth:80" /></div>';
				json[plugId] = {width:200,label:'单行输入框',required:false,labelWidth:80,name:('name'+(count++)),type:'textbox',plugId:plugId,index:count};
				break;
			case 'mtextbox':
				input = '<div class="pinput" id="'+ pplugId +'" ><input class="easyui-textbox" id="'+ plugId +'" name="'+ btnId +'" style="width:200px;" data-options="label:\'多行输入框\',required:false,editable:false,labelWidth:80,multiline:true" /></div>';
				json[plugId] = {width:200,label:'多行输入框',required:false,labelWidth:80,name:('name'+(count++)),type:'textbox',plugId:plugId,multiline:true,index:count};
				break;
			case 'numberbox':
				input = '<div class="pinput" id="'+ pplugId +'" ><input class="easyui-numberbox" id="'+ plugId +'" name="'+ btnId +'" style="width:200px;" data-options="label:\'数字输入框\',required:false,editable:false,labelWidth:80" /></div>';
				json[plugId] = {width:200,label:'数字输入框',required:false,labelWidth:80,name:('name'+(count++)),type:'textbox',plugId:plugId,precision:2,min:0,index:count};
				break;
			default:
				break;
			}
			$(this).append(input);
			$.parser.parse("#"+pplugId);
			
			$('#dg').datagrid('appendRow',json[plugId]);
			
			$("#"+pplugId).on("click",function(){
					$('body').data("plugId",plugId);
					$(".pinput-selected").removeClass("pinput-selected");
					$(this).addClass("pinput-selected");
					$("#configForm").form("load",json[plugId]);
					
					$("#btn_del").linkbutton("enable");
					$("#btn_up").linkbutton("enable");
					return false;
				}).trigger("click");
		}
	});
	
	$('#btn_del').bind('click', function(){
		var plugId = $("input[name=plugId]").val() ;
		var dom = "#"+plugId+"_p";
		$(dom).remove();
		$("#configForm").form("clear");
		$("#btn_del").linkbutton("disable");
		$("#btn_up").linkbutton("disable");
		delete json[plugId];
		/*删除列表记录*/
		var rowIndex = $('#dg').datagrid("getRowIndex",plugId);
		$('#dg').datagrid('deleteRow',rowIndex);
   	});  
	
	$('#btn_up').bind('click', function(){
		var len = $(".pinput").length;
		if(len>1){
			var $selected = $(".pinput-selected");
			$selected.insertBefore($selected.prev());
		}
	});
});
</script>
</html>